<template>
  <div class="love-talk">
    <div>
      <el-button type="primary" @click="handleAdd">获取一句话</el-button>

      <ul>
        <li v-for="item in list" :key="item.id">
          {{ item.id }} -- {{ item.title }}
        </li>
      </ul>
    </div>

    <br><br>
    <hr>
    <br>
    <div>
      <div>
        <el-button type="primary" @click="loveStore.getTalkList">通过store获取数据</el-button>
      </div>
      <ul>
        <li v-for="item in loveStore.talkList" :key="item.id">
          {{ item.id }} == {{  item.title }}
        </li>
      </ul>
    </div>

  </div>
</template>
<script setup lang="ts">
import axios from 'axios'
import { nanoid } from 'nanoid'
import useLoveTalkStore from '@/stores/loveTalk.ts'

interface TalkInter {
  id: string
  title: string
}

const list = ref<TalkInter[]>([])
// https://api.uomg.com/api/rand.qinghua?format=json
const handleAdd = async () => {
  // 解构：获取data，获取data里面的content，重命名为title(连续结构)
  const res = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')

  console.log('接口res',res)
  const {
    data: { content: title },
  } = res
  list.value.push({ id: nanoid(), title })
}

const loveStore = useLoveTalkStore()
</script>
<style scoped>
.love-talk {
  padding: 20px;
  border: 1px solid #883fb3;
  margin-top: 20px;
  background: #4d7e43;
}
</style>
